<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>146_元素修改</title>
	</head>
	<body>
		<button id="btn">按钮1</button>
		<button id="btn2">按钮2</button>
		<hr />
		<ul id="list">
			<li id="swk">孙悟空</li>
			<li id="zbj">猪八戒</li>
			<li id="shs">沙和尚</li>
		</ul>
		<script>
			const list = document.getElementById("list")
			const btn = document.getElementById("btn")
			btn.onclick = function() {
				//创建一个li标签
				const creaeLi = document.createElement("li");
				//向li中添加文本
				creaeLi.textContent = "唐僧"
				//给li添加id属性
				creaeLi.id = "ts";
				//appendChild给一个标签添加新的子标签，添加到最后
				list.appendChild(creaeLi)

				/*
				 insertAdjacentElement()可以向元素的任意位置添加元素
				 两个参数:1.要添加的位置 2.要添加的元素
				 beforeend (结束标签的前面)标签的最后   
				 afterbegin(开始标签的后面)标签的开始
				 beforebegin在元素的前边插入元素(就是插入兄弟元素)
				 afterend在元素的后边插入元素(就是兄弟元素)
				*/
				list.insertAdjacentElement("afterend", creaeLi)

				list.insertAdjacentHTML("afterbegin", "<li id='bgj'>白骨精</li>")
			}

			const btn2 = document.getElementById("btn2")
			btn2.onclick = function() {
				//创建一个蜘蛛精替换孙悟空
				const li = document.createElement("li");
				li.id = "zzj"
				li.textContent = "蜘蛛精";

				//const swk = document.getElementById("swk")
				//swk.replaceWith(li) //使用一个元素替换当前元素

				//remove()方法用来删除当前元素
				swk.remove()
			}
		</script>
	</body>
</html>